<template>
  <div
    class="zuicoolGuideMask"
    v-show="visible"
  >
    <div
      class="blackMask top"
      :style="topMaskStyle"
    />

    <div
      class="middle"
      :style="middleMaskStyle"
    >
      <div
        class="blackMask middle__item left"
        :style="{flexBasis: `${frame.window.left}px`}"
      />
      <div
        class="middle__item window"
        :style="{flexBasis: `${frame.window.width}px`}"
      />
      <div
        class="blackMask middle__item right"
        :style="{flexBasis: `${Math.max(375 - frame.window.width - frame.window.left, 0)}px`}"
      />
    </div>

    <div
      class="blackMask bottom"
      :style="bottomMaskStyle"
    />

    <div class="desc" :style="frame.desc.style">
      <img
        v-if="frame.desc.direction === 'left'"
        class="kudou left"
        src="./kudou.png"
      />

      <span class="content" :class="frame.desc.direction">
        <span class="bolder content_text">
          {{frame.desc.content}}
        </span>
      </span>

      <img
        v-if="frame.desc.direction !== 'left'"
        class="kudou"
        src="./kudou.png"
      />
    </div>

    <span class="arrowContainer" :style="frame.arrow.position">
      <img
        class="arrow"
        src="./arrow.png"
        :style="frame.arrow.style"
      />
    </span>

    <button
      class="bolder btn"
      :style="frame.btnStyle"
      @click="handleBtnClick"
    >
      我知道了
    </button>
  </div>
</template>

<script>
  export default {
    name: "zuicool-guide-mask",
    props: {
      /**
       * obj Array
       * {
       * window:{},
       * desc: {},
       * btnStyle: {},
       * arrow: {}
       * }
       */
      frames: {}
    },

    data() {
      return {
        step: 0,
        visible: false
      }
    },

    computed: {
      frame() {
        return this.frames && this.frames[this.step] || {
          window: {},
          arrow: {},
          desc: {},
          btnStyle: {}
        }
      },

      topMaskStyle() {
        const {window: _window} = this.frame;
        const result = {};

        if (typeof _window.top === 'number') {
          result.height = `${_window.top}px`;
        } else if (typeof _window.bottom === 'number') {
          result.bottom = `${_window.height + _window.bottom}px`
        }
        return result
      },

      middleMaskStyle() {
        const {window: _window} = this.frame;
        const result = {};

        typeof _window.height === 'number' && (result.height = `${_window.height}px`);
        if (typeof _window.top === 'number') {
          result.top = `${_window.top}px`;
        } else if (typeof _window.bottom === 'number') {
          result.bottom = `${_window.bottom}px`
        }
        return result
      },

      bottomMaskStyle() {
        const {window: _window} = this.frame;
        const result = {};

        if(typeof _window.bottom === 'number'){
          result.height = `${_window.bottom}px`
        } else {
          result.top = `${(_window.top || 0) + (_window.height || 0)}px`;
        }
        return result
      }
    },

    watch: {
      frame: {
        handler(val, oldVal){
          if(val && val !== oldVal){
            val.onEnter && this.$nextTick(() => {
              val.onEnter(this.$el, this)
            })
          }
        },
        immediate: true
      }
    },

    methods: {
      handleBtnClick() {
        try{
          this.frame.onBeforeLeave && this.frame.onBeforeLeave(this.$el, this);
        } catch(e) {
          console.error(`guideMask error: onBeforeLeave \n ${e.message}`);
        }
        if(this.step < this.frames.length - 1){
          this.step ++
        } else {
          this.visible = false;
        }
        //this.frame.onEnter && this.frame.onEnter(this.$el);
      }
    },
  }
</script>

<style lang='less' scoped>
  .zuicoolGuideMask {
    z-index: 101;

    width: 100%;
    height: 100%;

    position: fixed;
    left: 0;
    top: 0;
  }

  .blackMask {
    background-color: rgba(0, 0, 0, .7);
  }

  .top,
  .middle,
  .bottom {
    position: absolute;
    left: 0;
    right: 0;
  }

  .top {
    top: 0;
  };

  .bottom {
    bottom: 0;
  }

  .middle {
    display: flex;
  }

  .middle__item {
    flex: 1;
  }

  .window{
    border-style: solid;
    border-image: url("./window.png") 48% stretch;
    border-image-width: 10px;
  }

  // 提示问题+裤兜
  .desc{
    position: absolute;
  }

  .kudou{
    height: 105px;

    &.left{
      transform: rotateY(180deg);
    }
  }

  .content{
    display: inline-block;
    width: 207px;
    height: 105px;

    position: relative;

    background: url("./bubble.png") center / contain no-repeat;
    &.left{
      background-image: url("./bubble-left.png");

      >.content_text{
        padding-left: 35px;
      }
    }
  }

  .content_text{
    display: inline-block;
    padding: 0 20px;

    position: absolute;
    top: 50%;

    color: #fff;

    transform: translateY( -50%);
  }

  // 箭头
  .arrowContainer{
    position: absolute;
    width: 0;
    height: 0;
  }

  .arrow{
    position: absolute;

    transform-origin: 0 0;
  }

  // 确定按钮
  .btn{
    padding: 8px 18px;
    border-radius: 5px;

    position: absolute;

    line-height: 1;
    text-shadow: 0 0 1px #662a01;

    color: #fff;
    background-color: #ffff00;
  }
</style>
